<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<button-counter></button-counter>
			<button-counter></button-counter>
			<button-counter></button-counter>
		</div>
		<div id="app2">
			<button-counter></button-counter>
			<button-counter></button-counter>
			<button-counter></button-counter>
		</div>
		<script type="text/javascript">
			/* 
			  全局组件
			  
			  参数1:组件名称
			  data必须是一个函数
		    */
			const vc = Vue.component('button-counter', {
				template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>',
				data() {
					return {
						count: 0
					}
				},
				// methods:{},
				// computed:{},
				// watch:{},
				// directives
			})

			console.dir(vc);

			const vm1 = new Vue({
				el: '#app',
				data: {
					name: '张三'
				},
				// methods:{},
				// computed:{},
				// watch:{},
				// directives
			})
			// console.dir(vm)
			const vm2 = new Vue({
				el: '#app2',
				data: {
					name: '张三'
				}
			})
		</script>
	</body>
</html>
